import React, { Component } from 'react';
import { List ,Scroller} from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import axios from 'axios';
import './index.scss';

class Modden extends Component {
    constructor() {//它就是之前的getInitialState
        super();
        this.state = {
            dataSource:[{text:null,key:0}]
        };
    }
    componentWillMount(){
        var that=this;
        axios.get('http://chinayj.online/yophp/projects.php')
        .then(function(res){
            //console.log(res,1222);
            that.setState({
                dataSource: res.data
        })
        })
        .catch(function(error){
            console.log(error);
        });
        
    }
    componentDidMount(){
        console.log(12222);
        var oul = document.getElementById('change');
        var oli = oul.getElementsByTagName('li');
        console.log(oli,122,oul);
        for (var i = 0; i < oli.length; i++) {
            var element = oli[i];
            element.classList.remove('item-on');
        }
        oli[2].classList.add('item-on');
    }
    refresh() {
        this.setState({ dataSource: getRandomDataSource(25) });
    }
    fetch() {
        this.setState({ dataSource: this.state.dataSource.concat(getRandomDataSource(15)) });
    }
    render() {
        return (
            <div data-reactroot="" className="yo-flex">
                <header className="yo-header">
                    <h2 className="title">参与项目</h2>
                    <a className="regret yo-ico"></a>
                </header>
                <div className="flex">
                    <div className="yo-card">
                        <h3 className="hd">PC端：万表网</h3>
                        <div className="bd">关于万表:万表科技股份有限公司（简称万表）是由国际著名钟表收藏家肖晓先生创立的全球中高端腕表全价值链消费服务平台，专注服务国际中高端品牌腕表产业链。</div>
                            <div className="ft">
                                <span className="link">赞</span>
                                <span className="link">详情</span>
                            </div>
                        </div>
                        <div className="yo-card">
                             <div className="bd">万表以万表商城(名表垂直电商平台)、万表全球购(解决中国客户的海外购表问题)，万表城市体验中心(名表线下体验)、万表名匠(全球名表保养维修诚信联盟)，万表CLUB(万表会员俱乐部)、万表世界(全球名表资讯互动媒体)等六大业务单元构成大平台战略，基于场景的体验设计，打造涵盖手表消费的360度全价值链服务生态圈，为全球手表生态圈创造价值。</div>
                         </div>
                        <div className="yo-card">
                            <div className="extra">
                                 <img className="img-cover" src="../images/project1.png" alt="示例图片"/>
                             </div>
                            <div className="bd">
                                  <h3 className="title">负责模块：产品列表模块部分功能，用户模块部分构建</h3>
                                  <p className="desc">同时构建首页、详情页、购物车等...</p>
                             </div>
                        </div>
                 
                    <div className="yo-card">
                        <h3 className="hd">移动端</h3>
                        <div className="bd">类似美团，可实现定位，外卖，旅游，酒店等多功能App</div>
                            <div className="ft">
                                <span className="link">赞</span>
                                <span className="link">详情</span>
                            </div>
                        </div>
                        <div className="yo-card">
                             <div className="bd">功能多样化，结构丰富，采用的Vue框架开发</div>
                         </div>
                        <div className="yo-card">
                            <div className="extra">
                                 <img className="img-cover" src="../images/project2.png" alt="示例图片"/>
                             </div>
                            <div className="bd">
                                  <h3 className="title">负责模块：产品列表模块部分功能，购物车模块，用户模块部分构建</h3>
                                  <p className="desc">大部分HTML页面...</p>
                             </div>
                        </div>
                    </div>
                    <Footer></Footer>
                </div>
                
        )
    }
}

let guid = -1;

function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}

function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}

function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}
function scan(){
   $.ajax({
        type:'post',
        url:'http://chinayj.online/php/getsign.php',
        data:{
            url:window.location.href
        },
        dataType:'json'
    }).done(function(res){



    wx.config({
        debug: true,
        appId: res.appId,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: [
          // 所有要调用的 API 都要加到这个列表中
          'scanQRCode'
        ]
     });
      wx.ready(function () {
            // 在这里调用 API
            wx.scanQRCode({
                needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                  var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                  alert(result);
                }
            });


      });

    })
}
export default Modden;